<script setup lang="ts">
import type { NavigationItem } from '~~/types'

defineProps<{
  hideHero?: boolean
  hideBg?: boolean
}>()

const navigation: NavigationItem[] = [
  { title: 'Home', to: '/' },
  { title: 'Store', to: '/store' },
  { title: 'Blog', to: '/blog' },
  { title: 'Components', to: '/docs/components/autocomplete' },
  {
    title: 'Examples',
    children: [
      {
        title: 'Forms',
        to: '/docs/forms',
      },
      {
        title: 'Swiper',
        to: '/docs/swiper',
      },
    ],
  },
]
</script>

<template>
  <div
    class="bg-white" :class="{
      isolate: $route.path === '/',
    }"
  >
    <div v-if="!hideBg" class="absolute inset-x-0 top-[-10rem] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[-20rem]">
      <svg class="relative left-[calc(50%-11rem)] -z-10 h-[21.1875rem] max-w-none -translate-x-1/2 rotate-[30deg] sm:left-[calc(50%-30rem)] sm:h-[42.375rem]" viewBox="0 0 1155 678" xmlns="http://www.w3.org/2000/svg">
        <path fill="url(#45de2b6b-92d5-4d68-a6a0-9b9b2abad533)" fill-opacity=".3" d="M317.219 518.975L203.852 678 0 438.341l317.219 80.634 204.172-286.402c1.307 132.337 45.083 346.658 209.733 145.248C936.936 126.058 882.053-94.234 1031.02 41.331c119.18 108.451 130.68 295.337 121.53 375.223L855 299l21.173 362.054-558.954-142.079z" />
        <defs>
          <linearGradient id="45de2b6b-92d5-4d68-a6a0-9b9b2abad533" x1="1155.49" x2="-78.208" y1=".177" y2="474.645" gradientUnits="userSpaceOnUse">
            <stop stop-color="#9089FC" />
            <stop offset="1" stop-color="#FF80B5" />
          </linearGradient>
        </defs>
      </svg>
    </div>
    <div class="px-6 py-6 lg:px-8">
      <LandingNav :navigation="navigation" />
      <LandingMobileNav :navigation="navigation" />
    </div>
    <LandingHero v-if="!hideHero" />
  </div>
</template>
